﻿@page "/{ProjectId:int}/App"
@inherits MasaComponentBase

<MRow>
    <MCol Cols="2">
        <MNavigationDrawer Right Permanent Class="rounded-4 py-6 overflow-hidden" Style="height: calc(100vh - 192px); overflow-y: hidden;width:100%;">
            <div style="padding:0 24px; display:flex; flex-direction:column; align-items:center;">
                <div style="width:100%; overflow-x: hidden; overflow-y: hidden;" class="regular--text">
                    <MRow NoGutters Align="AlignTypes.Center" Justify="JustifyTypes.SpaceBetween">
                        <div class="emphasis--text h6 text-overflow2">@_projectDetail.Name</div>
                    </MRow>
                    <MRow NoGutters Class="body2">
                        @_projectDetail.Identity
                    </MRow>
                    <MRow NoGutters Class="mt-2 body2">
                        @T("AppCount")：<span class="subtitle2">@_apps.Count</span>
                    </MRow>
                    <div style="height: calc(100vh - 320px); overflow-y: auto; overflow-x: hidden;">
                        <MRow NoGutters Class="mt-4 body2" Style="word-break: break-all;">
                            @_projectDetail.Description
                        </MRow>
                        <MRow NoGutters Class="regular3--text body2 mt-6">@T("Participate team")</MRow>
                        <MRow NoGutters Class="mt-4">
                            <MAvatar Height="24" Width="24" MinHeight="24" MinWidth="24" Class="mr-3">
                                <MImage Height="24" Width="24" Src="@_projectTeamDetail.Avatar"></MImage>
                            </MAvatar>
                            @_projectTeamDetail.Name
                        </MRow>
                        <MRow NoGutters Class="regular3--text body2 mt-6">@T("Environment/Cluster")</MRow>
                        <div style="display:flex; flex-direction:column;align-items:start">
                            @{
                                var envCluster = _allEnvClusters.Where(envCluster => _projectDetail.EnvironmentClusterIds.Contains(envCluster.Id));
                                foreach (var item in envCluster)
                                {
                                    <EnvClusterChip Class="mt-4" EnvironmentName="@item.EnvironmentName" EnvironmentColor="@item.EnvironmentColor" ClusterName="@item.ClusterName" />
                                }
                            }
                        </div>
                    </div>
                </div>
            </div>
        </MNavigationDrawer>
    </MCol>
    <MCol Cols="10">
        <div class="bizCard">
            <h6 class="emphasis2--text h6">@T("Business configuration")</h6>
            <MCard Ripple=false Class="mt-4 rounded-5 appcard" Height="163"
                   OnClick="()=>NavigateToConfigAsync(new ConfigComponentModel(_bizDetail.Id, _projectEnvClusters[0].Id, ConfigObjectType.Biz, ProjectId))">
                <MCardTitle Class="pb-0" Style="font-size: medium; flex-wrap:nowrap;">
                    <div class="emphasis2--text h7" @onclick:stopPropagation>
                        @if (!_isEditBiz)
                        {
                            @_bizDetail.Name
                        }
                        else
                        {
                            <STextField Rules="BizNameRules" Dense Outlined @bind-Value="@_bizDetail.Name"></STextField>
                        }
                    </div>
                    <div class="mx-4" style="color:#E2E7F4">|</div>
                    <div class="emphasis2--text h7 text-overflow">Biz</div>
                    <MSpacer />
                    @if (_isEditBiz)
                    {
                        <SButton Class="mr-4" OnClickStopPropagation Icon OnClick="CancelEditBizName">
                            <SIcon Tooltip="@T("Cancel")" Color="#323D6F">mdi-close-thick</SIcon>
                        </SButton>
                    }
                    <SButton Icon OnClick="UpdateBizAsync" OnClickStopPropagation>
                        @if (!_isEditBiz)
                        {
                            <SIcon Color="#323D6F" Size="20">mdi-pencil</SIcon>
                        }
                        else
                        {
                            <SIcon Color="success">mdi-check</SIcon>
                        }
                    </SButton>
                </MCardTitle>
                <div class="regular3--text pl-4 body2 text-overflow">@_bizDetail.Identity</div>
                <MCardActions Class="pa-0 mx-3 pb-4 cardaction">
                    <MChipGroup @key="_projectEnvClusters" Class="env-cluster-chip-group" ActiveClass="primary--text">
                        @foreach (var item in _projectEnvClusters)
                        {
                            <EnvClusterChip OnClick="()=>NavigateToConfigAsync(new ConfigComponentModel(_bizDetail.Id, item.Id, ConfigObjectType.Biz, ProjectId))"
                                            Style="margin:0 6px;"
                                            EnvironmentName="@item.EnvironmentName"
                                            EnvironmentColor="@item.EnvironmentColor"
                                            ClusterName="@item.ClusterName" />
                        }
                    </MChipGroup>
                    @{ var bizRelease = _bizLatestReleaseConfig.FirstOrDefault(x => x.ProjectId == _projectDetail.Id); }
                    <div class="full-width text-end">
                        <LatestConfigPublish LatestReleaseConfigModel="bizRelease" TextClass="regular3--text body3" TitleClass="regular3--text body3"></LatestConfigPublish>
                    </div>
                </MCardActions>
            </MCard>
        </div>
        <div class="appCard mt-6">
            <MRow Class="justify-center">
                <MCol Lg="8" Md="8" Sm="6">
                    <div class="emphasis2--text h6 mt-1">@T("App")</div>
                </MCol>
                <MCol Lg="4" Md="4" Sm="6">
                    <SSearch @bind-Value="_appName" OnEnter="SearchApp" Height="40" Dense BackgroundColor="#fff" MaxWidth="0" Placeholder="@T("Please enter the app name and press enter to query")" />
                </MCol>
            </MRow>
            <div class="mt-6" style="width:100%; height: calc(100vh - 497px);overflow-y:auto; overflow-x:hidden; position:relative;">
                @if (_apps.Any())
                {
                    <MRow>
                        @foreach (var app in _apps)
                        {
                            var appLatest = _appLatestReleaseConfig.FirstOrDefault(x => x.AppId == app.Id);
                            <MCol Lg="4" Md="6" Sm="12">
                                <AppCard
                                    OnClick="()=>NavigateToConfigAsync(new ConfigComponentModel(app.Id, app.EnvironmentClusters[0].Id, ConfigObjectType.App, app.ProjectId))" Style="border: none;" 
                                    OnPinClick="()=>AppDetailPinAsync(app)" IsPin="app.IsPinned" App="app" EnvironmentClusters="app.EnvironmentClusters" LatestReleaseConfig="appLatest">
                                    <MChipGroup @key="app.EnvironmentClusters" Class="env-cluster-chip-group" ActiveClass="primary--text">
                                        @foreach (var item in app.EnvironmentClusters)
                                        {
                                            <EnvClusterChip OnClick="()=>NavigateToConfigAsync(new ConfigComponentModel(app.Id, item.Id, ConfigObjectType.App, ProjectId))"
                                                            Style="margin:0 12px 1px 0;"
                                                            EnvironmentName="@item.EnvironmentName"
                                                            EnvironmentColor="@item.EnvironmentColor"
                                                            ClusterName="@item.ClusterName" />
                                        }
                                    </MChipGroup>
                                </AppCard>
                            </MCol>
                        }
                    </MRow>
                }
                else
                {
                    <SEmptyPlaceholder @key="_projectDetail.Id" Height="100%" Width="100%" Placeholder="@(T("EmptyApp"))"></SEmptyPlaceholder>
                }

                <MOverlay Class="rounded-4" Value="_showProcess" Absolute Color="#fff" Opacity="1.0">
                    <MProgressCircular Width="4" Indeterminate Size="48" Color="primary"></MProgressCircular>
                </MOverlay>
            </div>
        </div>
    </MCol>
</MRow>